<template>
  <!-- 列表组 -->
  <ul class="list-group">
    <li class="list-group-item d-flex justify-content-between align-items-center" v-for="item in list" :key="item.id">
      <!-- 复选框 -->
      <div class="form-check">
        <input class="form-check-input" type="checkbox" value="" :id="item.id" v-model="item.done">
        <label class="form-check-label" :for="item.id" :class="item.done?'delete':''">
          {{item.task}}
        </label>
      </div>
      <!-- 徽标 -->
      <span class="badge badge-success badge-pill" v-if="item.done">完成</span>
      <span class="badge badge-warning badge-pill" v-else>未完成</span>
    </li>
  </ul>
</template>
<script>
export default {
  name:'TodoList',
  props:{
    list:{
      type:Array,
      required: true,
      default:[]
    }
  }
}
</script>
<style lang="less" scoped>
	/* 为列表设置固定宽度 */
  .list-group {
  width: 400px;
  }
  /* 删除效果 */
  .delete {
  text-decoration: line-through;
  }
</style>